디자인 토큰 & 컴포넌트 명세

색상59개 사용 → 24개 → 정규화 후 17개

추출된 59개 중 1~2회만 쓰인 일회성 값을 걷어내면 아래 24개가 실질적인 팔레트입니다. 여기서 gray 계열 7개를 slate로 합치면 17개가 최종입니다 — 정규화 확정안 3번에 대응표가 있습니다. 아래 표는 정규화 전 실측값입니다.

브랜드 · 액션

중립 — 표면과 텍스트

시맨틱

플랫폼 브랜드 색

대시보드 언급률 막대에만 쓰입니다. 액센트와 별개로 관리하세요.

타이포그래피실측 22개 크기 → 확정 8개

서체는 시스템 스택 하나입니다: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif. 데이터·버전 문자열에만 ui-monospace, SFMono-Regular, Menlo를 씁니다. 웨이트는 600 / 700 두 개뿐이고 800은 로그인 히어로 1회입니다.

아래가 확정 스케일입니다. 크기 8개 · 텍스트 스타일 10개. 실측 22개 크기가 전부 여기로 흡수됩니다.

굵기는 400 · 600 · 700 세 개로 충분합니다. 800은 로그인 히어로 1곳뿐이라 display 스타일에 흡수했습니다. 실측 18px 중 14회는 텍스트가 아니라 아이콘·아바타 치수이므로 텍스트 스타일이 아닙니다 — 컴포넌트 크기로 관리하세요.

간격 · 라운드 · 선

간격 (gap 실측)

4의 배수를 기본으로 하되 홀수(5·7·9)가 상당수 섞여 있습니다. 아래 8단계로 정리하면 전체의 약 90%를 덮습니다.

모서리 라운드

선과 그림자

일반 카드에는 그림자가 없습니다. 1px 테두리만으로 표면을 구분합니다.

버튼4변형 × 3크기

견본 — 제품의 실제 CSS

모달 푸터는 삭제(좌측 정렬) → 여백 → 취소 → 저장 순서로 고정입니다. 삭제는 margin-right:auto로 밀어냅니다.

입력 필드인풋 · 셀렉트 · 텍스트에어리어

견본 — 좌: 기본, 우: 필수 강조(2px 액센트 테두리)

인증 코드 입력 (6칸)

견본 — 채워짐 #2563eb / 빈 칸 #e2e8f0 / 오류 #f87171. 테두리 1.5px, 라운드 10px.

상태 배지4변형 · 값이 코드에 고정

병원 관리상태는 제안 · 유지 · 보류 · 종료 4개로 닫혀 있습니다. 목록에서는 원형(제안), 상세 헤더에서는 "~중"이 붙습니다(제안중).

견본 — 좌측 4개는 목록형, 이후는 헤더형 · 라벨형 · 카운트형

목록형 13.5px / 600 · padding 3px 10px · 헤더형 13.5px / 700 · 라벨형 13px / 600 · padding 2px 8px · 전부 radius 999px

칩3용도

진료과목 선택, 카테고리·지역 관리, 필터에 각각 다른 칩이 쓰입니다. 형태는 비슷하지만 상호작용이 다르므로 별개 컴포넌트로 만드세요.

진료과목 토글 — 선택 / 미선택

선택 border #2563eb · bg #eff6ff · text #1d4ed8 / 미선택 #d1d5db · #fff · #4b5563 · padding 6px 13px · 14.5px

카테고리 · 지역 칩 — 카운트 + 편집 + 삭제

좌: 기본 · 우: 편집 중(테두리 #2563eb, 인풋 폭 72px) — 7개 화면에서 동일

플랫폼 필터

실제 화면에서는 텍스트 대신 19~20px 플랫폼 아이콘이 들어갑니다. 라운드 8px로 칩과 다릅니다.

라디오 (관리상태 선택)

링 17px / 2px, 점 9px · 선택 #2563eb / 미선택 링 #9ca3af + 투명 점

막대 · 게이지

진행 막대

트랙 h 6px · #f1f5f9 · radius 999px · 채움 #2563eb(기본) 또는 플랫폼 색 · 값 라벨 14px/600 · width 38px · 우측정렬

도넛 게이지

견본 — 채움 / 채움 / 데이터 없음

카드가장 많이 쓰이는 컨테이너

견본 — 헤더 + 본문 + 푸터 3단 구조

강조 패널 (모달 내부)

border #dbeafe · bg #f8fafc · radius 10px · padding 14px 16px — 7개 화면 반복

모달컴포넌트 1개 · 변형 2개 (신규 / 수정)

7개 화면이 같은 팝업을 씁니다. 코드에서도 hospital-modal.js로 분리돼 있습니다. 컴포넌트는 하나, 최상위 변형은 신규·수정 둘입니다. 그 외 상태는 변형이 아니라 안에 든 자식 컴포넌트의 상태로 처리하세요 — 그래야 변형이 2×2×2로 폭발하지 않습니다.

변형 축 — 모드 = 신규 | 수정

변형이 아닌 것 — 자식 컴포넌트의 상태

아래는 신규·수정 양쪽에서 똑같이 일어납니다. 모달 변형으로 만들지 말고 해당 자식 컴포넌트에 불리언 속성을 두세요.

공통 스펙

본문 필드 순서: 병원명* → 진료과목 칩 → 특성 설명 → 관리상태 라디오 → 진료카테고리 패널 → 지역카테고리 패널 → 위치·전화 2열 → 계약일·담당자 2열 → 메모

페이지 헤더2종

병원 컨텍스트 헤더 — 진단 화면 5개

아바타 44px · radius 10px · bg #eff6ff · 18px/700 #2563eb · 이름 21px/700 · 메타 15px #64748b · 연필 히트영역 22px · radius 6px

단순 제목 헤더 — 관리 화면 4개

21px/700 + 15px #64748b, 아래 여백 22px

사이드바컴포넌트 1개 · 변형은 활성 항목뿐

로그인 상태의 9개 화면이 완전히 동일한 사이드바를 씁니다. 메뉴 구성·순서·하단 블록·병원 셀렉트까지 전부 같고, 다른 것은 어느 항목이 활성인가 하나입니다. 변형 축은 그것 하나면 충분합니다.

활성 항목은 코드에서도 링크가 아니라 <div>입니다 — 자기 자신으로 가는 링크가 없습니다. 피그마에서도 활성 상태는 클릭 불가로 두는 편이 프로토타입에서 자연스럽습니다.

견본 — 실제 CSS 그대로 (로고·아이콘 자리는 단색 블록으로 대체)

푸터 · 빈 상태 · 스텝

목록 푸터 (검색 + 페이지 크기 + 페이지네이션)

화살표 26×26 · 1px #e2e8f0 · radius 8px · 카운트 13.5px #94a3b8 — 대시보드 4개 카드에서 반복

빈 상태

padding 52px 20~22px · 15px #94a3b8 · line-height 1.7 · 2행 구조(현상 + 다음 행동)

스텝 인디케이터 — 회원가입 3단계 / 비밀번호 찾기 2단계

완료 ✓ #2563eb · 현재 점 #2563eb · 라벨 700 #0f172a · 대기 점 #cbd5e1 · 라벨 #94a3b8 · 연결선 56×2px (지난 구간 #2563eb) · 열 폭 96px(회원가입) / 106px(비밀번호)

페이지 셸

정규화 확정안6건 · 그대로 적용하면 됩니다

13개 화면을 실측하니 6가지가 어긋나 있었습니다. 각각 아래로 확정했습니다. 판단 기준은 하나입니다 — 가장 많이 쓰인 값을 남기고, 애매하면 레이아웃이 커지지 않는 쪽을 택한다. 6건 모두 최대 1px 차이라 눈에 보이는 변화는 없습니다.

1. 0.5px 글자 크기 → 내림으로 정수화

518회 등장. 내림이면 기존 레이아웃이 절대 커지지 않아 줄바꿈이 깨지지 않습니다. 반올림하면 14.5→15처럼 커지는 값이 생겨 표 열 폭이 밀립니다.

2. 테두리 회색 → #e2e8f0 하나로

본문은 #e2e8f0(181회), 모달 폼만 #d1d5db(70회)를 씁니다. 같은 역할에 두 값이 쓰일 근거가 코드에 없고, #d1d5db는 slate가 아니라 gray 계열이라 아래 3번과도 충돌합니다. 전부 #e2e8f0으로 통일합니다 — 모달 인풋이 아주 미세하게 밝아지지만 카드·본문 인풋과 톤이 맞습니다.

3. gray 계열 → slate 계열로 통일

Tailwind slate와 gray가 섞여 있습니다. 나란히 놓으면 gray 쪽이 살짝 누렇게 보입니다. 다수인 slate로 통일합니다.

이걸 적용하면 색상 24개가 17개로 줄고, 팔레트가 slate + blue + 시맨틱 4색으로 깔끔하게 정리됩니다.

4. 카드 헤더 패딩 → 2가지로

현재 12·13·14·16px × 20·22px 조합이 6가지입니다. 실제로는 역할이 둘뿐입니다.

5. 구분선 → 위치로 결정

같은 자리에 #e2e8f0과 #f1f5f9가 섞여 있습니다. 규칙을 이렇게 고정합니다.

6. 라운드 → 6단계

덤으로 발견한 것

구축 순서

의존 관계상 아래 순서가 되돌아가는 작업이 가장 적습니다.

1. 변수(Variables) 먼저 — 색 17개. 정규화 3번을 적용한 값으로 등록합니다. #2563eb가 아니라 brand/500으로 부르기 시작해야 이후 컴포넌트가 전부 따라옵니다. 여기서 gray를 섞어 넣으면 끝까지 따라다닙니다.
2. 텍스트 스타일 10개. 확정 스케일 그대로 — 크기 8개, 굵기 400 / 600 / 700.
3. 이펙트 스타일 3개. 포커스 링, 모달 그림자, 인증 카드 그림자. 카드에는 그림자가 없다는 점을 기억하세요.
4. 프리미티브. 버튼(4변형×3크기) → 입력 필드(8변형) → 배지(4상태) → 칩(3용도, 편집 불리언 포함) → 라디오 → 진행 막대. 칩과 라디오의 on/off 속성을 여기서 제대로 만들어두면 모달 변형이 2개로 끝납니다.
5. 사이드바 — 변형 8개. 활성 항목 7개 + 없음. 9개 화면에 100% 동일하므로 이걸 먼저 만들어두면 이후 모든 앱 화면이 인스턴스 하나로 시작합니다.
6. 모달 — 변형 2개. 신규 / 수정. 나머지 케이스는 4번에서 만든 자식 컴포넌트의 상태로 처리합니다. 7개 화면이 이 인스턴스 하나를 공유합니다.
7. 카드 · 페이지 헤더 · 목록 푸터. 슬롯을 둔 컨테이너로 만들어 내용만 교체하도록.
8. 화면 12개 조립. 앱 화면 9개 → 인증 화면 3개 순서. 앱 화면은 사이드바 인스턴스 + 본문이라 빠르게 진행됩니다.

데이터 시각화(도넛·막대)는 피그마에서 정적 프레임으로 두는 편이 낫습니다. 도넛은 conic-gradient라 원형 진행바 플러그인이나 아크 도형으로 근사해야 하고, 값이 바뀔 일이 없으면 노력 대비 효용이 낮습니다.